<template>
  <div class="container">
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="150"
      :is-draggable="draggable"
      :is-resizable="resizable"
      :responsive="responsive"
      :vertical-compact="true"
      :use-css-transforms="true"
    >
      <grid-item
        :static="layout[0].static"
        :x="layout[0].x"
        :y="layout[0].y"
        :w="layout[0].w"
        :h="layout[0].h"
        :i="layout[0].i"
      >
        <Article></Article>
      </grid-item>
      <grid-item
        :static="layout[1].static"
        :x="layout[1].x"
        :y="layout[1].y"
        :w="layout[1].w"
        :h="layout[1].h"
        :i="layout[1].i"
      >
        <Course></Course>
      </grid-item>
      <grid-item
        :static="layout[2].static"
        :x="layout[2].x"
        :y="layout[2].y"
        :w="layout[2].w"
        :h="layout[2].h"
        :i="layout[2].i"
      >
        <Hot></Hot>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script setup lang="ts">
import Article from '../components/Content/Article.vue'
import Course from '../components/Content/Course.vue'
import Hot from '../components/Content/Hot.vue'
import { reactive, ref } from 'vue'
type layoutItem = {
  x: number
  y: number
  w: number
  h: number
  i: string
  static: boolean
}
const layout = reactive<layoutItem[]>([
  { x: 0, y: 0, w: 6, h: 1, i: '0', static: false },
  { x: 0, y: 1, w: 6, h: 1, i: '1', static: false },
  { x: 0, y: 2, w: 6, h: 1, i: '2', static: false },
  { x: 0, y: 2, w: 6, h: 1, i: '2', static: false },
])

const draggable = ref<boolean>(true)
const resizable = ref<boolean>(true)
const responsive = ref<boolean>(true)
</script>
<style scoped>
.container {
  width: 80%;
  height: 80%;
  margin: 0 auto;
}
.container .vue-grid-item.vue-grid-placeholder {
  background: rgb(43, 29, 119);
}
.vue-grid-layout {
  background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}
.vue-grid-item .static {
  background: #cce;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
</style>
